<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <title>生成邀请函</title>
    <load href="__PUBLIC__/js/jquery-1.9.1.min.js" />
</head>
<style type="text/css">
    body{font-size: 14px; max-width: 640px; margin: 0px 12px;}
    label{display: block; width: 100%; text-align: left; font-weight: bold; font-size: 16px; margin: 10px 0px;}
    .name_c{height: 36px; display: block; clear: both; width: 93%; line-height: 36px; text-align: left; font-size:16px; padding:0px 10px; border: solid 1px #e7e7e7; border-radius: 5px; background: none;}
    .sbu{display: block; border-radius:5px; cursor:pointer; margin: 0px auto; margin-top: 12px; height:38px; line-height:24px; font-size:16px; width:50%; padding:0px; list-style:none; background-color:#00A388; color:#fff; border:none;}
    a.yulan{display: block; text-align: center; margin: 10px 0px; color: #000; font-weight: bold; font-size:16px; border-top: solid 1px #ccc; line-height: 40px; color: #f00; text-decoration: none;}
    ul,li{padding:0px; list-style:none;}
    li span{font-size:16px;}
    li span .name_c{display:inline; width:50px;}
    .showimg{position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; overflow-x: hidden; z-index: 100; background-color: rgba(0,0,0,.8); display: none;}
    .showimg b{display: block; position: fixed; z-index: 200; top: 40px; right: 20px; width: 40px; height: 40px; cursor: pointer; line-height: 40px; display: none; text-align: center; font-size: 22px; font-weight: bold; background-color: #ff5454; color: #fff; border-radius: 100%;}
    .showimg a{display: block; color: #fff; font-size: 16px; text-align: center; width: 100%; margin-top: 100px; display: none;}
    .showimg img{width: 100%;}
    .showimg label{display: block; position: fixed; top: -10px; left: 0px; font-weight: normal; width: 100%; height: 32px; line-height: 32px; background-color: rgba(0,0,0,.7); font-size: 14px; color: #fff; text-align: center; display: none;}
</style>
<body>
<div class="showimg">
    <b class="close">X</b>
    <a>正在生成邀请函，请稍后...</a>
    <label>提示：按住图片不松开发送给朋友</label>
    <span></span>
</div>

    <ul>
        <li>
            <label>邀请对象：</label>
            <input type="text" name="name_c" class="name_c">
        </li>
    </ul>
    <input type="button" value="生成" class="sbu">
    <a class="yulan" href="{:C('WEBSITE')}/assets/img/yaoqing.jpg">预览</a>

<script type="text/javascript">
    $(function(){
        $(".showimg b").click(function(){
            $(".showimg span").html('');
            $(".showimg b").hide();
            $(".showimg a").hide();
            $(".showimg").hide();
            $(".showimg label").hide();
        })

        $(".sbu").click(function(){
            var url         = "{:U('scimg1')}";
            var name_c      = $("input[name='name_c']").val();
            if($.trim(name_c) == ''){
                alert("邀请对象不能为空！");
                return false;
            }
            $(".showimg").show();
            $(".showimg a").show();
            $(".showimg a").css({"display":"block"});
            var data = {"name_c":name_c,random:Math.random()};
            $.ajax({
                url:url,
                data:data,
                type:"POST",
                dataType:"JSON",
                success:function (result){
                    if(result.code == 1){
                        alert("邀请对象不能为空！");
                    }else if(result.code == 0){
                        $(".showimg span").html(result.data);
                        $(".showimg b").show();
                        $(".showimg label").show();
                        $(".showimg a").hide();
                    }

                }
            });
        })
    })
</script>
</body>
</html>